<template>
    <el-table @selection-change="handleSelectionChange" :data="tableStore.tableList" :height="tableHeight" stripe style="width: 100%" class="m-t-15 f15">
        <el-table-column
            type="selection"
            width="55"
            :selectable="isSelectable"
            v-if="select"
        />
        <el-table-column prop="" label="序号" width="60" v-if="select">
            <template #default="scope">
                <div>{{(tableStore.pagination.currentPage - 1) * tableStore.pagination.pageSize + scope.$index + 1 }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="shopId" label="门店号" width="100">
            <template #default="scope">
                <div>{{ scope.row.shopId }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="startTime" label="交易时间" width="160" >
            <template #default="scope">
                <div class="o5">{{ scope.row.startTime }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="endTime" label="成功时间" width="160" >
            <template #default="scope">
                <div class="o5">{{ scope.row.endTime }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="150" >
            <template #default="scope">
                <el-text type="danger">{{ numFormat((scope.row.amount / 100).toFixed(2)) }}元</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="operationType" label="交易类型" width="120">
            <template #default="scope">
                <el-text type="primary">{{ scope.row.operationType }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="accountname" label="账户名" width="150" />
        <el-table-column prop="bankAccount" label="卡号" width="180" />
        <el-table-column prop="tradeId" label="交易流水号" width="200">
            <template #default="scope">
                <div>{{ scope.row.tradeId }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="transferStatus" label="资金归集交易状态" width="180">
            <template #default="scope">
                <el-text type="success" v-if="scope.row.transferStatus == '成功'">{{ scope.row.transferStatus }}</el-text>
                <el-text type="info" v-else>{{ scope.row.transferStatus }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="withdrawStatus" label="提现状态" width="100" >
            <template #default="scope">
                <el-text type="success" v-if="scope.row.withdrawStatus == '成功'">{{ scope.row.withdrawStatus }}</el-text>
                <el-text type="info" v-else>{{ scope.row.withdrawStatus }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="200"/>
        <el-table-column prop="tradeId" label="操作" width="90" fixed="right">
            <template #default="scope">
                <el-button type="primary" @click="downloadData(scope.row.tradeId)" v-if="isSelectable(scope.row)">下载</el-button>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="当日回执和没有流水号不能下载"
                    placement="top-end"
                    v-else
                >
                    <el-button type="primary" disabled>下载</el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <div class="m-t-15 flex flex-jus-between" v-if="select">
        <div>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="下载当前条件的全部数据"
                placement="top-start"
            >
                <el-button type="primary" @click="downloadAllData">全部下载</el-button>
            </el-tooltip>
            <el-tooltip
                v-if="tableStore.downloadBtnShow"
                class="box-item"
                effect="dark"
                content="下载当前勾选的数据"
                placement="top-start"
            >
                <el-button type="primary" @click="downloadMoreData">下载选中项</el-button>
            </el-tooltip>
        </div>
        <el-pagination
            v-model:current-page="tableStore.pagination.currentPage"
            v-model:page-size="tableStore.pagination.pageSize"
            :page-sizes="[20, 50, 100, 200]"
            :disabled="tableStore.pagination.disabled"
            :background="tableStore.pagination.background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableStore.pagination.total"
            @size-change="changeSizeChange"
            @current-change="changeCurrentChange"
        />
        <!-- layout="total, sizes, prev, pager, next, jumper" -->
    </div>
</template>
<script setup lang="ts">
    import { useTableStore } from '@/stores/useTableStore'
    import { 
        numFormat,
        downloadData,
        handleSelectionChange,
        downloadMoreData,
        isSelectable,
        handleSizeChange,
        handleCurrentChange
    } from "@/utils/func";
    const tableStore = useTableStore()
    defineProps([
        'select',
        'tableHeight',
    ])
    function changeSizeChange(val:number){
        tableStore.getTableList
        handleSizeChange(val,tableStore.getTableList)
    }
    function changeCurrentChange(val:number){
        handleCurrentChange(val,tableStore.getTableList)
    }
    // 表格数据
    import useTable from '@/hooks/useTable'
    const { 
        downloadAllData,
    } = useTable()
</script>